@use '@material/feature-targeting/feature-targeting';
@use '@material/ripple/index' as ripple;
@use '@material/button/index' as mdc-button;
@use '@material/shape/index' as shape;
@use '@material/theme/theme-color';
@use '@material/elevation/mixins' as mdc-elevation;

$ripple-target: '.mdc-button__ripple';

@mixin core-styles($query: feature-targeting.all()) {
  @include without-ripple($query);
  @include ripple($query);
}

@mixin without-ripple($query: feature-targeting.all()) {
  .smui-button--color-secondary {
    @include mdc-button.ink-color(
      theme-color.prop-value(secondary),
      $query: $query
    );
    @include mdc-button.icon-color(
      theme-color.prop-value(secondary),
      $query: $query
    );

    &.mdc-button--raised,
    &.mdc-button--unelevated {
      @include mdc-button.filled-accessible(
        theme-color.prop-value(secondary),
        $query: $query
      );
      @include mdc-button.ink-color(
        theme-color.prop-value(on-secondary),
        $query: $query
      );
      @include mdc-button.icon-color(
        theme-color.prop-value(on-secondary),
        $query: $query
      );
    }

    &.mdc-button--outlined {
      @include mdc-button.outline-color(
        theme-color.prop-value(secondary),
        $query: $query
      );
    }
  }
}

@mixin ripple($query: feature-targeting.all()) {
  .smui-button--color-secondary {
    @include ripple.states(
      $color: theme-color.prop-value(secondary),
      $query: $query,
      $ripple-target: $ripple-target
    );
  }
}

@mixin group-core-styles($query: feature-targeting.all()) {
  .smui-button__group {
    display: inline-flex;

    & > .mdc-button,
    & > .smui-button__group-item > .mdc-button {
      margin-left: 0;
      margin-right: 0;
    }

    & > .mdc-button:not(:last-child),
    & > .mdc-button:not(:last-child) > .mdc-button__ripple,
    & > .smui-button__group-item:not(:last-child) > .mdc-button,
    &
      > .smui-button__group-item:not(:last-child)
      > .mdc-button
      > .mdc-button__ripple {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & > .mdc-button:not(:first-child),
    & > .mdc-button:not(:first-child) > .mdc-button__ripple,
    & > .smui-button__group-item:not(:first-child) > .mdc-button,
    &
      > .smui-button__group-item:not(:first-child)
      > .mdc-button
      > .mdc-button__ripple {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &.smui-button__group--raised {
      @include shape.radius(small, false, $query: $query);
      @include mdc-elevation.elevation(2, $query: $query);
    }

    & > .mdc-button--raised,
    & > .smui-button__group-item > .mdc-button--raised {
      @include group-mdc-button--raised_($query: $query);
    }

    & > .mdc-button--outlined:not(:last-child),
    & > .smui-button__group-item:not(:last-child) > .mdc-button--outlined {
      border-right-width: 0;
    }
  }
}

@mixin group-mdc-button--raised_($query) {
  @include mdc-button.shape-radius(small, $query: $query);
  @include mdc-elevation.elevation(0, $query: $query);

  &:hover,
  &:focus {
    @include mdc-elevation.elevation(0, $query: $query);
  }

  &:active {
    @include mdc-elevation.elevation(0, $query: $query);
  }

  &:disabled {
    @include mdc-elevation.elevation(0, $query: $query);
  }
}
